import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface TimelineState {
    isPlaying: boolean;
    // 游标位置 单位px 如果要计算游标位置，像素 = currentTime / 1000 * pixelsPerSecond
    cursorPosition: number;
    // 当前时刻 单位毫秒
    currentTime: number;
    // 总时长 单位毫秒
    totalDuration: number;
    // 每秒像素数 单位px
    pixelsPerSecond: number;
}

const initialState: TimelineState = {
    cursorPosition: 200,
    isPlaying: false,
    currentTime: 0,
    totalDuration: 0,
    pixelsPerSecond: 50,
};

const timelineSlice = createSlice({
    name: 'timeline',
    initialState,
    reducers: {
        setCursorPosition: (state, action: PayloadAction<number>) => {
            state.cursorPosition = action.payload;
        },
        setPlaying: (state, action: PayloadAction<boolean>) => {
            state.isPlaying = action.payload;
        },
        setCurrentTime: (state, action: PayloadAction<number>) => {
            state.currentTime = action.payload;
        },
        setTotalDuration: (state, action: PayloadAction<number>) => {
            state.totalDuration = action.payload;
        },
        setPixelsPerSecond: (state, action: PayloadAction<number>) => {
            state.pixelsPerSecond = action.payload;
        },
        resetTimeline: (state) => {
            state.cursorPosition = 200;
            state.isPlaying = false;
            state.currentTime = 0;
            state.totalDuration = 0;
            state.pixelsPerSecond = 50;
        },
    },
});

export const { setCursorPosition, setPlaying, setCurrentTime, setTotalDuration, setPixelsPerSecond, resetTimeline } = timelineSlice.actions;

export default timelineSlice.reducer;
